<template>
<div>
  <div class="manageUserHeader">
    <label>
      用户id&nbsp;&nbsp;
      <input @keyup.enter="getUser" v-model="searchData.userId" type="text" placeholder="请输入用户id">
    </label>
    <label>
      用户昵称&nbsp;&nbsp;
      <input @keyup.enter="getUser" v-model="searchData.nickName" type="text" placeholder="请输入用户昵称">
    </label>
    <label>
      电话号码&nbsp;&nbsp;
      <input @keyup.enter="getUser" v-model="searchData.tel" type="text" placeholder="请输入电话号码">
    </label>
  </div>

  <div class="manageUserBody">
    <table>
      <thead>
      <tr>
        <td>用户id</td>
        <td>用户昵称</td>
        <td>用户头像</td>
        <td>电话</td>
        <td>操作</td>
      </tr>
      </thead>
      <tbody v-if="userListData.length">
      <tr v-for="(item,index) in userListData">
        <td>{{item.id}}</td>
        <td>{{item.nickname}}</td>
        <td>
          <img :src="item.avatar" alt="图片未加载">
        </td>
        <td>{{item.telephone}}</td>
        <td>
          <span @click="toFreeze(index)" v-if="item.status<=2" class="redText">冻结</span>
          <span @click="noFreeze(index)" v-else class="greenText">解冻</span>
<!--          <span>查看</span>-->
        </td>
      </tr>
      </tbody>
      <template v-else>
        <el-empty description="无数据" />
      </template>
    </table>
  </div>

  <nav style="margin-top: 40px" aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item" :class="{disabled:pageData.current===1}" @click="choosePages(1)">
        <a class="page-link">首页</a>
      </li>
      <li v-for="(item,index) in pageData.pages>3?3:pageData.pages" @click="choosePages(index+1)" class="page-item"><a class="page-link" href="#">{{index+1}}</a></li>
      <li class="page-item" :class="{disabled:pageData.current===pageData.pages}" @click="choosePages(pageData.pages)">
        <a class="page-link" href="#">末尾</a>
      </li>
    </ul>
  </nav>
</div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getUsersAPI} from "@/apis/user";
import {ElMessage} from "element-plus";
import {changeStatusAPI} from "@/apis/user.js";

const userListData=ref([])

const searchData=ref({
  userId:'',
  nickName:'',
  tel:'',
  current:1
})

const pageData=ref({})

const getUser=async ()=>{
  const res=await getUsersAPI(searchData.value);

  if(res.data.code===1)
  {
    pageData.value=res.data.data
    userListData.value=res.data.data.records
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const toFreeze=async (index)=>{
  let data=userListData.value[index];
  data.status=2*10+data.status

  const res=await changeStatusAPI(userListData.value[index]);

  if(res.data.code===1)
  {
    ElMessage.success("修改成功")
    getUser()
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const noFreeze=async (index)=>{
  let data=userListData.value[index];
  data.status=data.status-20

  const res=await changeStatusAPI(userListData.value[index]);

  if(res.data.code===1)
  {
    ElMessage.success("修改成功")
    getUser()
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const choosePages=(current)=>{
  searchData.value.current=current;
  getUser()

  // 移除所有带有 "active" 类的元素的 "active" 类
  document.querySelectorAll(".page-item").forEach((item) => {
    item.removeAttribute("aria-current");
    item.classList.remove("active");
  });

  // 为当前页面的元素添加 "active" 类，并设置 aria-current 属性
  const activePageItem = document.querySelector(`.page-item:nth-child(${currentPage+1})`);
  if (activePageItem) {
    activePageItem.classList.add("active");
    activePageItem.setAttribute("aria-current", "page");
  }
}

onMounted(()=>{
  getUser()
})
</script>

<style scoped>
.manageUserHeader
{
  height: 80px;
  width: 100%;
  /*background-color: #02b7fb;*/
  line-height: 80px;
}
.manageUserHeader label
{
  margin-left: 50px;
}
.manageUserHeader input
{
  box-sizing: border-box;
  padding-left: 8px;
  width: 200px;
  height: 40px;
  border: 1px solid #02b7fb;
}

table
{
  margin-left: 30px;
}
td
{
  flex:1;
  text-align: center;
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
thead tr td
{
  font-weight: bold;
  font-size: 18px;
}
tr
{
  display: flex;
  padding-top: 10px;
  width: 1400px;
  text-align: center;
  justify-content: space-evenly;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}
tbody
{
  min-height: 500px;
  margin-top: 10px;
}

td img
{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.grayText,
.greenText,
.redText
{
  /*font-weight: bold;*/
  font-style: italic;
  /*font-weight: bold;*/
  /*cursor: grab;*/
  font-size: 16px;
  margin: 0 15px;
}
.greenText
{
  color: green;
}
.redText
{
  color: red;
}
.grayText
{
  color: gray;
}
</style>